<template>
  <div class="sign_up">
    <van-cell-group>
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入用户名"
        required
        clearable
      />
      <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        required
      />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        required
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
        >发送验证码</van-button>
      </van-field>
    </van-cell-group>
    <div class="tip">
      <div class="tip_title">团购须知</div>
      <div>1、必须购买10点以上</div>
      <div>2、必须购买10点以上</div>
      <div>3、必须购买10点以上</div>
      <div>4、必须购买10点以上</div>
    </div>
    <div class="radio">
      <van-checkbox
        v-model="checked"
        checked-color="#07c160"
      >已阅读</van-checkbox>
    </div>
    <div class="submit">
      <van-button
        type="primary"
        size="large"
      >提交</van-button>
    </div>

  </div>

</template>
<script>
import { Cell, CellGroup, Field, Checkbox, Button, Toast } from "vant";
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Checkbox.name]: Checkbox,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  data() {
    return {
      username: "",
      phone: "",
      sms: "",
      checked: false
    };
  }
};
</script>
<style lang="less">
.sign_up {
  .tip {
    background-color: #ffffff;
    padding: 10px 10px;
    box-sizing: content-box;
    margin-top: 10px;
    font-size: 12px;
    color: #bcb9b7;
    .tip_title {
      font-size: 13px;
      margin-bottom: 2px;
    }
  }
  .radio {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #ffffff;
    padding: 10px 10px;
    box-sizing: border-box;
  }
  .van-checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 13px;
    color: #bcb9b7;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .van-checkbox__label {
    font-size: 14px;
  }
  .submit {
    margin-top: 20px;
    padding: 10px 10px;
    box-sizing: border-box;
  }
}
</style>
